<template>
  <ElementDialog
    ref="dialog"
    custom-class="send-user-task-model"
    lock-scroll
    embed
    :visible="visible"
    title="发送选择"
    height="540px"
    width="816px">
    <FormHolder ref="form" :model="entity" label-width="0">
      <FormItem v-if="hasNext" block required prop="nodeId" label="环节" prefix-pick hide-label>
        <!-- 环节信息 -->
        <fieldset style="padding: 10px; border: 1px solid #ddd; border-radius: 4px">
          <legend style="padding: 0 4px; color: var(--color-primary)">请选择要发送的环节</legend>
          <ElSelect
            v-model="entity.nodeId"
            :disabled="!options || options.length === 1"
            clearable
            placeholder="请选择"
            style="width: 100%">
            <ElOption v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
          </ElSelect>
        </fieldset>
      </FormItem>
      <!-- 发送用户选择 -->
      <FormItem v-if="hasNext" block required prop="users" label="处理人" prefix-pick hide-label>
        <ElTransfer
          v-model="entity.users"
          filterable
          :titles="titles"
          :props="transferProp"
          :filter-method="(query, item) => item.name.indexOf(query) > -1"
          filter-placeholder="输入姓名搜索..."
          :data="handlers" />
      </FormItem>
      <FormItem block required prop="advice" label="办理意见" hide-label>
        <ElInput v-model="entity.advice" type="textarea" :rows="3" placeholder="请输入办理意见" />
      </FormItem>
    </FormHolder>
    <template #footer>
      <ConfirmButton :confirmable="false" loadable type="primary" size="small" @click="completeTask">{{
        hasNext ? '发送' : '完成'
      }}</ConfirmButton>
    </template>
  </ElementDialog>
</template>

<script>
  import { Transfer } from 'element-ui'
  import { completeTask } from '@/api/admin/workitem'

  export default {
    name: 'SendUserTaskModel',
    components: {
      ElTransfer: Transfer
    },
    props: {
      visible: Boolean,
      flowContext: Object,
      businessKey: String
    },
    data() {
      return {
        options: [],
        handlers: [],
        titles: ['未选', '已选'],
        transferProp: {
          label: 'name',
          key: 'code'
        },
        entity: {
          nodeId: '',
          users: [],
          advice: ''
        }
      }
    },
    computed: {
      hasNext() {
        return this.flowContext.hasNext
      }
    },
    watch: {
      flowContext: {
        deep: true,
        immediate: true,
        async handler(newVal) {
          if (newVal.hasNext) {
            this.options = newVal.nextNodes
            this.entity.nodeId = this.options[0].id
            await this.$nextTick()
            this.$refs.form?.clearValidate()
          }
        }
      },
      'entity.nodeId'(newVal) {
        this.entity.users = []
        const row = this.options.find(item => item.id === newVal)
        this.handlers = row?.handlers ?? []
      }
    },
    methods: {
      async completeTask() {
        await this.$refs.form.validate()
        const res = await completeTask({
          businessKey: this.businessKey,
          variables: {
            handlers: this.entity.users
          },
          advice: this.entity.advice
        })
        console.log(res)
        this.$refs.dialog.hide()
      }
    }
  }
</script>

<style lang="scss">
  .send-user-task-model {
    .el-transfer {
      @include flex-row;
      margin: 10px 0;

      .el-transfer__buttons {
        @include flex-column;
        justify-content: center;
        padding: 0 10px;

        .el-transfer__button {
          display: block;

          &:last-child {
            margin-top: 5px;
            margin-left: 0;
          }
        }
      }

      .el-transfer-panel {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        width: 360px;
        height: 300px;
        max-height: 100%;
        overflow: hidden;
        vertical-align: middle;
        background: #fff;
        border: 1px solid #ebeef5;
        border-radius: 4px;
      }

      .el-transfer-panel__body {
        height: 300px;
        overflow: auto;
      }

      .el-transfer-panel__list.is-filterable {
        height: 200px;
        padding-top: 0;
      }
    }
  }
</style>
